<template>
   <div>
        <el-form :model="model" label-width="80px" Id="selectForm" :rules="rulesForm" ref="dataForm">
            <el-form-item label="父分类" prop="parenT_TYPE_ID">
                 <treeselect size="small" v-model="model.parenT_TYPE_ID" :options="options" 
                    :normalizer="normalizer" :showCount="true" :value="model.parenT_TYPE_ID" :max-height="200"
                    placeholder="请选择所属分类" :disabled="isDisaBled" />
            </el-form-item>
            <el-form-item label="分类名称" prop="iteM_TYPE_NAME">
                <el-input size="small" v-model="model.iteM_TYPE_NAME" placeholder="请输入分类名称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物料/产品">
                <el-radio-group size="small" v-model="model.iteM_OR_PRODUCT">
                    <el-radio :label="'物料'" >物料</el-radio>
                    <el-radio :label="'产品'">产品</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="model.enablE_FLAG">
                    <el-radio :label="0" >启用</el-radio>
                    <el-radio :label="1">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="model.remark" placeholder="请输入内容" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-rights">
            <el-button style="padding:10px 25px;margin-right:10px;" @click="CloseDialog">取 消</el-button>
            <el-button style="padding:10px 25px;" slot="reference" @click="save" type="primary">确 定</el-button>
        </div>
   </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    components:{
        Treeselect
    },
    props:{
        model:{
            type:Object,
            require:true,
        },
        options:{
            type:Array,
            require:true,
        },
        //是否修改
        isUpdate:{
            type:Boolean,
            require:true,
        },
    },
    data(){
        return{
            isDisaBled:false,
            rulesForm:{
                parenT_TYPE_ID:[{ required : true, message:'请选择分类', trigger:'blur'}],
                iteM_TYPE_NAME:[{ required : true, message:'请输入分类名称', trigger:'blur'}]
            }
        }
    },
    methods:{
        CloseDialog(){
            this.$emit('CloseDialog');
        },
        DataBind(){
            this.$emit('DataBind');
        },
        normalizer(node) {
            this.isDisaBled =this.isUpdate == true ? true:false;
            if(node.children && !node.children.length){
            delete node.children;
            }
            return {
                id: node.iteM_TYPE_ID,
                label: node.iteM_TYPE_NAME
            };
        },
        save(){//新增或修改
            
            this.$refs.dataForm.validate((valid)=>{
                if(valid){
                    if(this.isUpdate){
                        this.$http.putForm('/api/MaterialsProductClassify',{model:this.model})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.DataBind();
                                this.CloseDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        })
                    }
                    else{
                        this.$http.postForm('/api/MaterialsProductClassify',{model:this.model})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.DataBind();
                                this.CloseDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        })
                    }
                }
                else{
                    this.ShowMsg('验证不通过','error');
                }
            })
        },
    },
}
</script>

<style scoped>
.dialog-rights{
    text-align: right;
}
#selectForm >>> .el-form-item__content{
    line-height: 35px;
}
#selectForm >>> .vue-treeselect__input-container input{
    height: 34px;
}
</style>